<template>
  <div class="recommend">
    <div class="recommend-warper">
      <ScrollView>
        <div>
          <Banner :banner='bars'></Banner>
          <PersonaLized :pers='pers' :title="'推荐歌单'" @select='fatherSelectItem' :type='"Personalized"'></PersonaLized>
          <PersonaLized :pers='albums' :title="'最新专辑'" @select='fatherSelectItem' :type='"Albums"'></PersonaLized>
          <Songlist :list='songs' :title="'最新音乐'"></Songlist>
        </div>
      </ScrollView>
    </div>
    <transition>
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { getBanner, getPersonaLized, getNewAlbum, getNewSong } from '../api/index.js'
import ScrollView from '../components/iscroll.vue'
import Banner from '../components/recommend/banner.vue'
import PersonaLized from '../components/recommend/PersonaLized.vue'
import Songlist from '../components/recommend/Songlist.vue'
export default {
  name: 'Recommend',
  data () {
    return {
      bars: [],
      pers: [],
      albums: [],
      songs: []
    }
  },
  created () {
    getBanner()
      .then((data) => {
        // console.log(data)
        this.bars = data.data.banners
        // console.log(this.bars)
      })
      .catch(function (err) {
        console.log(err)
      })
    getPersonaLized()
      .then((data) => {
        // console.log(data)
        this.pers = data.data.result
        // console.log(this.pers)
      })
      .catch(function (err) {
        console.log(err)
      })
    getNewAlbum()
      .then((data) => {
        // console.log(data.data.albums.splice(0, 6))
        this.albums = data.data.albums.splice(0, 6)
        // console.log(this.albums)
      })
      .catch(function (err) {
        console.log(err)
      })
    getNewSong()
      .then((data) => {
        const list = []
        data.data.result.forEach((value) => {
          const obj = {}
          obj.name = value.name
          obj.id = value.id
          obj.picUrl = value.picUrl
          const va = value.song.artists
          let singer = ''
          for (let i = 0; i < va.length; i++) {
            if (i === 0) {
              singer = va[i].name
            } else {
              singer = singer + '-' + va[i].name
            }
          }
          obj.singer = singer
          list.push(obj)
        })
        this.songs = list
      })
      .catch(function (err) {
        console.log(err)
      })
  },
  components: {
    ScrollView,
    Banner,
    PersonaLized,
    Songlist
  },
  methods: {
    fatherSelectItem (id, type) {
      this.$router.push({
        path: `/recommend/detail/${id}/${type}`
      })
    }
  }
}
</script>

<style scoped lang='scss'>
  .recommend{
    width: 100%;
    position: fixed;
    top: 184px;
    left: 0;
    bottom: 0;
    right: 0;
    .recommend-warper{
      overflow: hidden;
      width: 100%;
      height: 100%;
    }
  }
  .v-enter{
    transform: translateX(100%);
  }
  .v-enter-to{
    transform: translateX(0%);
  }
  .v-enter-active{
    transition: transform 1s;
  }
  .v-leave{
    transform: translateX(0%);
  }
  .v-leave-to{
    transform: translateX(100%);
  }
  .v-leave-active{
    transition: transform 1s;
  }
</style>
